<template>
	<view>
		<view :class="type==1?'daycons1':'daycons'">
			<view class="zltap">
				<image :src="img_src+'bg1@2x.png'" mode="widthFix"></image>
				<scroll-view class="daytxt" :scroll-into-view="'id'+((cur==0||cur==1)?'':cur)" :scroll-with-animation="true" scroll-x>
					<view class="itemtxt" @tap="swidths(index)" :id="'id'+index" :class="index==cur?'activez':''" v-for="(item,index) in date" :key="index">
						<span>{{item.day}}</span>
						<span>{{index==0?'今天':(index==1?'明天':(index==2?'后天':('周'+item.week)))}}</span>
					</view>
				</scroll-view>
			</view>
			<!-- 预约日期 -->
			<view :class="type==1?'xzlist1':'xzlist'">
				<view class="ylist" v-for="(item,index) in yylist" :key="index">
					<view v-if="item.type==0" @tap="datbtn(index)">
						<span>{{item.text}}</span>
						<span>休息</span>
					</view>
					<view v-if="item.type==1" @tap="datbtn(index)" style="background-color: #ffefe8;color:#ea5b33">
						<image src="/static/ztimg.png" mode="widthFix"></image>
					</view>
					<view v-if="item.type==2" @tap="datbtn(index)" style="background-color: #ffefe8;color:#ea5b33">
						<span>{{item.text}}</span>
						<span>可预约</span>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup v-model="show"  :closeable='false' :mask="true" :mask-close-able="false"  :bacolor="bacolor" mode="center" width="80%" border-radius="20" height="auto">
			<view class="constc">
				<view class="consr">
					<view @click="show = false"><image src="/static/close@2x.png" mode="widthFix"></image></view>
				</view>
				<view class="constc1">
					<view class="txt8">将 {{time}} 设置为： </view>
				</view>
				<view class="btnfor1">
					<view @tap="setbtn(0)">休息 </view>
					<view @tap="setbtn(1)">可以预约</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	var util = require('../utils/util.js');
	export default {
		props: {
			type:{
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				bacolor:'#ffffff',
				show:false,
				img_src: app.globalData.img_src,
				img_urls: app.globalData.img_urls,
				date:[],
				cur:0,
				yylist:[{
					type:0,
					text:'09:00'
				},{
					type:0,
					text:'09:30'
				},{
					type:0,
					text:'10:00'
				},{
					type:0,
					text:'10:30'
				},{
					type:1,
					text:'11:00'
				},{
					type:2,
					text:'11:30'
				},{
					type:1,
					text:'12:00'
				},{
					type:2,
					text:'12:30'
				},{
					type:0,
					text:'13:00'
				},{
					type:0,
					text:'13:30'
				},{
					type:0,
					text:'14:00'
				},{
					type:0,
					text:'14:30'
				},{
					type:0,
					text:'15:00'
				},{
					type:0,
					text:'15:30'
				},{
					type:0,
					text:'16:00'
				},{
					type:0,
					text:'16:30'
				},{
					type:0,
					text:'17:00'
				},{
					type:0,
					text:'17:30'
				},{
					type:0,
					text:'18:00'
				},{
					type:0,
					text:'18:30'
				},{
					type:0,
					text:'19:00'
				},{
					type:0,
					text:'19:30'
				},{
					type:0,
					text:'20:00'
				},{
					type:0,
					text:'20:30'
				}],
				datetype:'',
				time:''
			}
		},
		onLoad: function() {
			var that = this;
		},
		created() {
			
		},
		mounted: function() {
			// 处理小程序 attached 生命周期
			this.attached();
		},
		methods: {
			setbtn(cur){
				// cur==0走休息  1是可预约
				// this.datetype==0走休息接口  1是可预约接口
				if(this.datetype==0){
					
				}else{
					
				}
			},
			datbtn(idx){
				var day = this.yylist[idx];
				// this.type 等于1是在个人中心跳进来进行设置的
				this.datetype = 1;
				if(this.type==1){
					this.show = true
					this.time = this.yylist[idx].text
				}else{
					if(day.type==0){
						app.globalData.show("已超时或店铺休息、已预约满请选择别的时间~")
						return true
					}
					uni.navigateTo({
						url:'/subcontract/Reservation/Reservation?id='+idx+'&year='+this.date[this.cur].date+'&year1='+this.date[this.cur].date1
					})
				}
				
				// this.$emit('datbtn', {
				//     con: day
				// });
			},
			attached: function(){
				var day = [];
				for(var i=0;i<7;i++){
					day.push(util.dealTime(i))
				}
				this.date = day
				////console.log(day)
			},
			swidths(cur){
				this.cur = cur
				// this.type 等于1是在个人中心跳进来进行设置的 日期全天是否可以预约
				this.datetype = 0;
				if(this.type==1){
					this.show = true
					this.time = this.date[cur].day1
				}
				this.$emit('swidths', {
				    cur: cur
				});
			},
		}
	}
</script>

<style scoped lang='scss'>
	.btnfor1>view:nth-child(1){
		float: left;
		background: #EC8F6D;
	}
	.btnfor1>view:nth-child(2){
		float: right;
		background: #E65E2E;
	}
	.btnfor1>view{
		width: 48%;
		height: 85rpx;
		border-radius: 50px;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 85rpx;
	}
	.btnfor1{
		width: 100%;
		height: auto;
		display: table;
		background-color: #fff;
		box-sizing: border-box;
		padding: 25rpx 25rpx;
		margin-bottom: 12px;
	}
	.txt8{
		width: 100%;
		height: auto;
		display: table;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 36rpx;
		color: #000000;
		margin-bottom: 10px;
	}
	.constc1{
		width: 85%;
		height: auto;
		display: table;
		margin-left: 7.5%;
	}
	.consr{
		width: 100%;
		height: 40px;
	}
	.consr>view{
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		float: right;
	}
	.consr>view>image{
		width: 24px;
		height: 24px;
	}
	.constc{
		width: 100%;
		height: auto;
	}
	.daycons{
		width: 100%;
		height: auto;
		display: table;
		padding-top: 36px;
		background: url($IMG_URL+'bjtxt1.jpg')no-repeat;
		background-size: 100% auto;
	}
	.daycons1{
		width: 100%;
		height: auto;
		display: table;
		padding-top: 21px;
	}
	.ylist>view>span{
		width: 100%;
		height: auto;
		color: #beafc6;
		font-size: 28rpx;
		line-height: 22px;
		text-align: center;
	}
	.ylist>view>image{
		width: 25px;
	}
	.ylist>view{
		width: 152.5rpx;
		height: 122.5rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		border-radius: 10rpx;
	}
	.ylist{
		width: 152.5rpx;
		height: 122.5rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		float: left;
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		border-radius: 10rpx;
		background-color: #f8f8f8;
	}
	.xzlist>view:nth-child(4n),.xzlist1>view:nth-child(4n){
		margin-right: 0px !important;
	}
	.xzlist{
		width: 750rpx;
		background-color: #fff;
		height: auto;
		display: table;
		padding-left: 25rpx;
		box-sizing: border-box;
		margin-top: 20px;
		padding-bottom:50px;
	}
	.xzlist1{
		width: 750rpx;
		background-color: #fff;
		height: auto;
		display: table;
		padding-left: 25rpx;
		box-sizing: border-box;
		padding-top: 20px;
		padding-bottom:50px;
	}
	.activez{
		background-color: #fff;
	    border-top-right-radius: 25rpx;
	    border-top-left-radius: 25rpx;
	}
	.activez>span{
		color: #eb613d !important;
	}
	.activez>span:nth-child(2){
		font-size: 42rpx !important;
		font-weight: 300 !important;
	}
	.itemtxt>span:nth-child(1){
		margin-top: 10px;
	}
	.itemtxt>span{
		display: table;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		margin-bottom: 4px;
		width: 100%;
		height: auto;
	}
	.itemtxt{
		width:161.25rpx;
		min-height: 150rpx;
		display: inline-block;
	}
	.daytxt{
		width: 725rpx;
		height: auto;
		display: flex;
		overflow: hidden;
		white-space: nowrap;
		position: absolute;
		bottom: 0px;
		left:25rpx;
	}
	.zltap>image{
		width: 100%;
		height: auto;
	}
	.zltap{
		width: 100%;
		height: auto;
		display: table;
		position: relative;
	}
</style>
